new Vue({
    el: '#app',
    data: {
        heaIconJson: {
            left: './static/img/icon-list.png',
            middle: "<span style='text-align:center;font-size:32px;'>物流详情</span>",
            right1: './static/img/icon-search.png',
            right2: './static/img/icon-shopping.png'
        },
        //分类下面那一栏的数据
        goodsTitle: {
            title: 'SDJKHFJKSD FAHJKSDKF',
            notice: '今日推荐',
            month: 'Swedsfa',
            year: '2018',
            date: '28'
        },
        //推荐商品数据
        goodsInfo: [{
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }],
        //控制更多物流
        moreOr: '点击查看更多物流详情',
        //控制物流不同需求定位
        offPosi: false,
        //这个是已经收缩了的处理过的物流信息
        wuliuDataCopy: [],
        //这是全部的物流信息
        wuliuData: [{
            month: '09-23',
            time: '14:00',
            info: [{
                state: '送',
                title: '快马加鞭中',
                notice: '的数据库恢复山东福建安徽为圣诞节和罚款技术的十大富豪乃i额外花费'
            }, {
                state: '收',
                title: '快马加鞭中',
                notice: '的数据库恢复山东福建安徽为圣诞节和罚款技术的十大富豪乃i额外花费'
            }]
        }, {
            month: '09-23',
            time: '14:00',
            info: [{
                state: '送',
                title: '快马加鞭中',
                notice: '的数据库恢复山东福建安徽为圣诞节和罚款技术的十大富豪乃i额外花费'
            }]
        }, {
            month: '09-23',
            time: '14:00',
            info: [{
                state: '送',
                title: '快马加鞭中',
                notice: '的数据库恢复山东福建安徽为圣诞节和罚款技术的十大富豪乃i额外花费'
            }]
        }],
    },
    created: function() {
        //处理物流信息放进wuliuDataCopy中显示
        this.handWuliu();
    },
    mounted: function() {
        if (!this.wuliuDataCopy.length || ((this.wuliuDataCopy.length == 1) && (this.wuliuDataCopy[0].info.length == 1))) {
            this.offPosi = true;
        }
        var This = this;
        setTimeout(function() {
            var height = $(window).height() - 400 + 'px';
            $('.scroll-wrap').scroll(function() {
                if ($(this).scrollTop() == 0) {
                    $(this).css({
                        'transform': 'translateY(' + height + ')'
                    });
                    $(This.$refs.scrollDiv).css('transform', 'translateY(0)');
                } else {
                    $(this).css({
                        'transform': 'translateY(0px)'
                    });
                    $(This.$refs.scrollDiv).css('transform', 'translateY(500px)');
                }
            });
        }, 300);
    },
    methods: {
        right1: function() {
            window.location.href = HREF + 'search.html';
        },
        right2: function() {
            window.location.href = HREF + 'index.html';
        },
        //处理物流信息
        handWuliu: function() {
            if (!this.wuliuData.length) {
                this.wuliuData = [];
            }
            if (this.wuliuData[0].info.length > 1) {
                this.wuliuDataCopy.push(JSON.parse(JSON.stringify(this.wuliuData[0])));
                this.wuliuDataCopy[0].info.splice(2);
                return;
            }
            this.wuliuDataCopy.push(this.wuliuData[0]);
            if (this.wuliuData[1]) {
                this.wuliuDataCopy.push(JSON.parse(JSON.stringify(this.wuliuData[1])));
                this.wuliuDataCopy[1].info.splice(1);
            }
        },
        //查看更多物流
        likeMoreWuliu: function() {
            var This = this;
            var el = $(this.$refs.showWuliu);
            var tuijian = this.$refs.tuijian;
            if (this.moreOr == '点击查看更多物流详情') {
                this.wuliuDataCopy = this.wuliuData;
                el.css('height', '0px');
                setTimeout(function() {
                    var i = 0;
                    for (var val of This.wuliuData) {
                        for (var info of val.info) {
                            i += 130;
                        }
                    }
                    el.css('height', (i + 60) + 'px');
                    $(tuijian).css('paddingTop', i + 'px');
                }, 10);

                this.moreOr = '隐藏更多物流';
            } else {
                this.moreOr = '点击查看更多物流详情';
                this.wuliuDataCopy = [];
                this.handWuliu();
                el.css('height', '320px');
                $(tuijian).css('paddingTop', '200px');
            }
        },
        //打开客服
        openKefu: function() {
            alert('客服')
        }
    }
});